<template>
  <!-- 歌手模块  -->
  <div class="artist">
    <!-- 分类 -->
    <div class="category">
      <div class="area">
        语种：
        <div class="area-item"
             v-for="(item,index) in area"
             :key="index"
             @click="areaClick(index)"
             :class="{action:areaIndex==index}">
          {{item.name}}
        </div>
      </div>
      <div class="type"
           v-if="type!=null">
        分类：
        <div class="type-item"
             v-for="(item,index) in type"
             :key="index"
             @click="typeClick(index)"
             :class="{action:typeIndex==index}">
          {{item.name}}
        </div>
      </div>
    </div>
    <scroll ref="scroll"
            class="artist-scroll"
            :pull-up-load="true"
            @pullingUp='pullingUp'>
      <artist-list :artist-list='artistlist'></artist-list>
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll.vue'
import ArtistList from '../childComps/ArtistList.vue'
import { _getArtist } from 'network/discover'
import { debounce } from 'assets/common/tool'
import { indexMixin } from 'mixin/indexMixin'
import { ImgMixin } from 'mixin/ImgMixin'
export default {
  components: { Scroll, ArtistList },
  name: 'ArtistCategory',
  data () {
    return {
      areaIndex: 0,
      typeIndex: 0,
      limit: 30,
      page: 1,
      artistlist: [],
      area: [
        { value: -1, name: "全部" },
        { value: 7, name: "华语" },
        { value: 96, name: "欧美" },
        { value: 8, name: "日本" },
        { value: 16, name: "韩国" },
        { value: 0, name: "其他" }
      ],
      type: [
        { value: -1, name: "全部" },
        { value: 1, name: "男歌手" },
        { value: 2, name: "女歌手" },
        { value: 3, name: "乐队" }
      ]
    }
  },
  mixins: [indexMixin, ImgMixin],
  created () {
    this.getArtist()
  },
  methods: {
    areaClick (index) {
      this.areaIndex = index
      this.getArtist()
    },
    typeClick (index) {
      this.typeIndex = index
      this.getArtist()
    },
    // 设置向上拉，加载数据的时间
    pullingUp () {
      debounce(this.getArtistPullUp(), 1000)
    },
    // 向上拉，加载数据
    getArtistPullUp () {
      _getArtist(
        this.area[this.areaIndex].value,
        this.type[this.typeIndex].value,
        this.limit * this.page
      ).then(res => {
        this.artistlist = res.data.artists
        this.page++
      })
    },
    // 点击进入语种歌手类型详情
    getArtist () {
      _getArtist(
        this.area[this.areaIndex].value,
        this.type[this.typeIndex].value,
        this.limit * this.page
      ).then(res => {
        this.artistlist = res.data.artists
      })
    }
  }
}
</script>

<style scoped>
.artist {
  width: 100%;
  height: 100%;
}
.category {
  color: #000;
}
.area {
  display: flex;
}
.type {
  display: flex;
  margin-top: 10px;
}
.area-item,
.type-item {
  padding: 0 10px;
}
.action {
  color: #02927f;
}
.artist-scroll {
  height: calc(100% - 55px);
  overflow: hidden;
  margin-top: 10px;
}
</style>
